<template>
  <Form inline class="manage-header">
    <FormItem>
      <Input v-model="title" placeholder="标题"></Input>
    </FormItem>
    <FormItem>
      <Cascader :data="typeSelect" trigger="hover" v-model="type" placeholder="分类"></Cascader>
    </FormItem>
    <FormItem>
      <Checkbox v-model="recommend">推荐</Checkbox>
      <Button type="primary" @click="search">搜索</Button>
      <Button @click="clear">清空</Button>
    </FormItem>
  </Form>
</template>

<script>
export default {
  name: 'ManageHeader',
  data() {
    return {
      title: '',
      typeSelect: [],
      type: [],
      recommend: true
    }
  },
  computed: {
    typeList() {
      return this.$store.getters['blog/types']
    }
  },
  mounted() {
    this.getTypes()
  },
  methods: {
    // 返回iview级联选择所需的数据格式
    getTypes() {
      var list = this.typeList
      var types = []
      for (var i=0; i<list.length; i++) {
        var data = {value:'', label: '', children: []}
        types.push(data)
        types[i].value = list[i].id
        types[i].label = list[i].name
        if (list[i].childTypes.length != 0) {
          for (var j=0; j<list[i].childTypes.length; j++) {
            var child = {value:'', label: ''}
            types[i].children.push(child)
            types[i].children[j].value = list[i].childTypes[j].id
            types[i].children[j].label = list[i].childTypes[j].name
          }
        }
      }
      this.typeSelect = types
    },
    // 搜索
    search() {
      this.$emit('search', {
        title: this.title,
        typeId: this.type[this.type.length-1] === undefined ? Number : this.type[this.type.length-1],
        recommend: this.recommend
      })
    },
    // 清空选项
    clear() {
      this.title = ''
      this.type = []
    }
  },
}
</script>

<style lang="scss">
.manage-header {
  margin: 1rem;
  padding: 1rem;
  background-color: #f8f8f9;
  border: 1px solid #dcdee2;
  .ivu-form-item {
    margin: 0;
    padding: 0 .5rem;
    button {
      margin: 0 .5rem;
      float: right;
    }
  }
  .ivu-cascader {
    line-height: inherit;
  }
  @media screen and (max-width: 800px) { 
    .ivu-form-item {
      display: block;
      margin: 10px 0;
    }
  }
}
</style>